<template>
  <div>

    <!-- 1.定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>信息设置</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2.定义卡片视图 -->
    <el-card class="box-card">

       <!-- 3.定义栅格的一行 :gutter="20"定义行间距   :span="9" 占位符  -->
       <el-row :gutter="20">
         <div class="nav"> 个人信息</div>
         <div class="text1" style="margin-bottom: -30px;">{{username}}</div>
             <div class="content">
                 <div class="one">
                     <input type="text" class="one1" placeholder="         | 请输入旧的密码"><br>
                     <input type="text" class="one2" placeholder="         | 请输入新的密码"><br>
                     <button class="one3">修改密码</button>
                 </div>

                 <div class="two">
                   <div class="text1" style="margin-bottom: -30px;">{{username}}</div>
                     <div class="two1" ><pan-thumb :image="updateUserModel.avatar"/> </div>
                     <div class="text1" style="margin-bottom: -30px;">{{username}}</div>
                     <div class="text1" style="margin-bottom: -30px;">{{username}}</div>
                     <div class="two2">
                         <div class="two2-one">{{updateUserModel.phone}}<br>手机号</div>
                         <div> {{updateUserModel.email}}<br>邮箱</div>
                     </div>
                 </div>
                 <div class="there">
                     <div class="there1">
                         <span class="there-images1"> </span>
                         <span>更换头像</span>
                     </div>
                     <div class="there1">
                         <span class="there-images2"> </span>
                         <span>修改用户名</span></button>
                     </div>
                     <div class="there1">
                         <span class="there-images3"> </span>
                         <sapn>修改联系方式</sapn>
                     </div>
                     <div class="there1">
                         <span class="there-images4"> </span>
                         <sapn>修改邮箱</sapn>
                     </div>
                 </div>
             </div>

       </el-row>
       <el-form>
           <el-form-item label="">
             <!-- 文件上传按钮 -->
             <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
             </el-button>
             <!--
           v-show：是否显示上传组件
           :key：类似于id，如果一个页面多个图片上传控件，可以做区分
           :url：后台上传的url地址
           @close：关闭上传组件
           @crop-upload-success：上传成功后的回调 -->
            <!-- :url="BASE_API+'/eduoss/fileoss'" -->
             <image-cropper
               v-show="imagecropperShow"
               :width="300"
               :height="300"
               :key="imagecropperKey"
               :url="'http://localhost:7791/eduoss/fileoss'"
               field="file"
               @close="close"
               @crop-upload-success="cropSuccess"/>
           </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>

<script>
import ImageCropper from '../ImageCropper/index.vue'
import PanThumb from '../PanThumb/index.vue'
export default {
  data () {
    // 校验邮箱规则 rule校验规则   value校验的数据   callback回调函数
    const checkEmail = (rule, value, callback) => {
      // 定义邮箱的正则表达式  JS中用/来表示正则表达式的开始和结束
      const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
      // 正则表达式语法校验  test(xx) 校验成功 返回true  校验失败返回false
      if (emailRege.test(value)) {
        // 表示邮箱合法 正确返回
        return callback()
      }
      callback(new Error('请填写正确的邮箱地址'))
    }
    // 校验手机号的邮箱规则
    const checkPhone = (rule, value, callback) => {
      // 定义校验手机号的正则语法
      const phoneRege = /^1[34578][0-9]{9}$/
      if (phoneRege.test(value)) {
        return callback()
      }
      callback(new Error('请填写正确的手机号'))
    }

    const checkPassword = (rule, value, callback) => {
      if (this.addUserModel.password !== value) return callback(new Error('2次密码输入不一致'))
      // 否则校验成功
      callback()
    }

    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      userList: [],
      // 记录总数是数值类型
      total: 0,
      dialogVisible: false,
      addUserModel: {
        username: '',
        password: '',
        password2: '',
        email: '',
        city: '',
        address: '',
        phone: ''
      },
      imagecropperShow: false,
      imagecropperKey: 0,
      BASE_API: 'http://localhost:7791/', // 接口API地址
      updateDialogVisible: false,
      formaac: false,
      // 定义修改用户数据封装
      updateUserModel: {
      },
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  created () {
    this.username = sessionStorage.getItem('username')// 在登陆页时存储数据，此时取数据
    console.log(this.username)
    // this.gettableData(this.username)
    // this.getList()
    this.getInfo(this.username)
  },
  components: { ImageCropper, PanThumb },
  methods: {
    close () { // 关闭弹框
      this.imagecropperShow = false
      // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    cropSuccess (data) {
      console.log(data)
      this.imagecropperShow = false
      this.updateUserModel.avatar = data.url
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    async getInfo (username) {
      const {
        data: result
      } = await this.$http.get('/usercustomer/name?username=' + username, {
        params: this.queryItemInfo
      })
      this.updateUserModel = result.data
      console.log('++++++++++++++++')
      console.log(result.data)
    },
    async getUserList () {
      const { data: result } = await this.$http.get('/usercustomer/list', {
        params: this.queryInfo
      })
      if (result.status !== 200) return this.$message.error('用户列表查询失败')
      this.userList = result.data.rows
      this.total = result.data.total
      console.log('总记录数:' + this.total)
    },
    async updateStatus (user) {
      // 实现用户状态修改  注意使用模版字符串  ES6中提出的新用法 ${key}
      // const {data: result} = await this.$http.put('/user/status/'+user.id+'/'+user.status)
      const { data: result } = await this.$http.put(`/usercustomer/status/${user.id}/${user.status}`)
      if (result.status !== 200) return this.$message.error('用户状态修改失败!')
      this.$message.success('用户状态修改成功!')
    },
    handleSizeChange (pageSize) {
      // console.log("每页展现的条数"+pageSize)
      this.queryInfo.pageSize = pageSize
      this.getUserList()
    },
    handleCurrentChange (pageNum) {
      // console.log("页数:"+pageNum)
      this.queryInfo.pageNum = pageNum
      this.getUserList()
    },
    closeDialog () {
      // 重置表格数据
      this.$refs.addUserRef.resetFields()
    },
    // 校验用户数据
    addUserBtn () {
      this.$refs.addUserRef.validate(async valid => {
        // 如果校验失败 则停止数据
        if (!valid) return
        // console.log(this.addUserModel)
        const { data: result } = await this.$http.post('/usercustomer/addUser', this.addUserModel)
        if (result.status !== 200) return this.$message.error('用户新增失败')
        this.$message.success('用户新增成功')
        // 关闭对话框
        this.dialogVisible = false
        // 重新获取用户列表
        this.getUserList()
      })
    },
    async updateUserBtn (user) {
      this.updateDialogVisible = true
      const { data: result } = await this.$http.get('/usercustomer/' + user.id)
      if (result.status !== 200) return this.$message.error('用户查询失败')
      this.updateUserModel = result.data
    },
    closeUpdateDialog () {
      // 重置表格数据
      this.$refs.updateUserRef.resetFields()
    },
    updateUser () {
      // 1.预校验数据
      this.$refs.updateUserRef.validate(async valid => {
        if (!valid) return this.$message.error('表单验证没有通过')
        // 根据接口文档要求封装数据
        const user = {}
        user.id = this.updateUserModel.id
        user.phone = this.updateUserModel.phone
        user.email = this.updateUserModel.email
        user.city = this.updateUserModel.city
        user.address = this.updateUserModel.address
        const { data: result } = await this.$http.put('/usercustomer/updateUser', user)
        if (result.status !== 200) return this.$message.error('用户修改失败')
        this.$message.success('用户更新成功')
        this.updateDialogVisible = false
        this.getUserList()
      })
    },
    async formaa (user) {
      this.formaac = true
      const { data: result } = await this.$http.get('/usercustomer/' + user.id)
      if (result.status !== 200) return this.$message.error('用户查询失败')
      this.updateUserModel = result.data
    },
    closeUpdateDialog () {
      // 重置表格数据
      this.$refs.updateUserRef.resetFields()
    },
    updateUser () {
      // 1.预校验数据
      this.$refs.updateUserRef.validate(async valid => {
        if (!valid) return this.$message.error('表单验证没有通过')
        // 根据接口文档要求封装数据
        const user = {}
        user.id = this.updateUserModel.id
        user.phone = this.updateUserModel.phone
        user.email = this.updateUserModel.email
        user.city = this.updateUserModel.city
        user.address = this.updateUserModel.address
        const { data: result } = await this.$http.put('/usercustomer/updateUser', user)
        if (result.status !== 200) return this.$message.error('用户修改失败')
        this.$message.success('用户更新成功')
        this.formaac = false
        this.getUserList()
      })
    },
    async deleteUser (usercustomer) {
      // 1.消息确认框
      const result = await this.$confirm('此操作将永久删除 ' + usercustomer.username + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)

      // 如果确认  confirm  如果取消 cancel
      if (result !== 'confirm') {
        this.$message.info('删除取消')
      }
      const { data: result2 } = await this.$http.delete(`/usercustomer/${usercustomer.id}`)
      if (result2.status !== 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      // 重新加载 数据
      this.getUserList()
    },
    tiaozhuan1 () {
      this.$router.push('/customer')
    },
    tiaozhuan2 () {
      this.$router.push('/flashguest')
    },
    tiaozhuan3 () {
      this.$router.push('/autocity')
    },
    tiaozhuan4 () {
      this.$router.push('/privatecar')
    }
  },
  // 利用钩子函数实现数据查询
  mounted () {
    this.getUserList()
  }
}
</script>

<style lang="less" scoped>
body{
		background-color: #E1DED6;
	}
    .content{
        display: flex;
        margin-top: 60px;
        justify-content: space-around;
        color: white;
        flex-wrap: wrap;

    }
	.one,.two,.there{
		width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
	}
    .one{
        order:0;
        background: #FFFFFF;
        height: 200px;

    }

	.nav{
		text-align: center;
	}
	.one1{
		width: 90%;
		height:70px;
        margin-top: 20px;
		background: url(../../assets/3.jpeg) no-repeat ;
		border: 3px solid #E1DED6
	}
	.one2{
		width: 90%;
		height: 70px;
		background:  url(../../assets/3.jpeg) no-repeat ;
		border: 3px solid #E1DED6;
	}
	.one3{width: 100%;
		height: 80px;
		background-color: #EF8D32;
		margin-top:-10px;
		color: white;
        cursor:pointer;
	}
	.two1 img{
        margin-top: 5px;
		width: 80%;
		height: 80%;
        border-radius: 30%;

	}
    .two1{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color:  #ffffff;

    }
    .two2{
        display: flex;

        width: 100%;
        height: 70px;
        background-color: #EF8D32;
        align-items: center;
    }
    .two2 div{
        width: 100%;
        margin-top: 8px;

        text-align: center;
        font-size: 14px;
    }
    .two2-one{
        border-right: 1px solid white;
    }
    .text1{
        font-size: 18px;
        color: red;
        margin-top: -10px;
        width: 100%;
        text-align: center;
        line-height: 40px;
        background-color: #FFFFFF;
    }
    .there1{width: 100%;
        height: 50px;
        background-color: #EF8D32;
        border: 1px solid indianred;
        color: white;
        cursor:pointer;

    }
    .there-images1{
        display: inline-block;

        width:25px;
        margin-top: 10px;
        height: 25px;
        background: url() no-repeat -1px 2px;
    }
    .there-images2{
          display: inline-block;
          width:25px;
          margin-top: 10px;
          height: 25px;
          background: url() no-repeat -30px 2px;
      }
    .there-images3{
            display: inline-block;
            width:25px;
            margin-top: 10px;
            height: 25px;
            background: url() no-repeat -60px 2px;
        }
    .there-images4{
              display: inline-block;
              width:25px;
              margin-top: 10px;
              height: 25px;
              background: url() no-repeat -90px 2px;
          }
    .one3:hover{
        background-color: #ee5a32;
    }
    .there1:hover{
           background-color: #ee5a32;
       }
    button{
        margin-top: 15px;
        float: right;
        background-color: #505771;
        border-radius: 5px;
        border: none;
        margin-right: 3px;}
    @media screen and (max-width: 500px) {
        .one,.two,.there{
            width: 100%;
            margin-top: 10px;

        }
    }
</style>
